<template>
  <van-action-sheet :show="value">
    <view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
      <view
        class="u-btn-picker u-btn-picker--tips"
        hover-class="u-opacity"
        :hover-stay-time="150"
        @tap="getResult('cancel')"
        >取消</view
      >
      <view class="title">选择地区</view>
      <view
        class="u-btn-picker u-btn-picker--primary"
        hover-class="u-opacity"
        :hover-stay-time="150"
        @touchmove.stop=""
        @tap.stop="getResult('confirm')"
        >确定</view
      >
    </view>
    <view class="u-picker-body">
      <picker-view :value="pickVal" @change="bindChange" class="u-picker-view">
        <picker-view-column>
          <view class="u-column-item" v-for="(item, index) in districtsObj.provinces" :key="index">
            <view class="u-line-1">
              {{ item.name }}
            </view>
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="u-column-item" v-for="(item, index) in districtsObj.cities" :key="index">
            <view class="u-line-1">
              {{ item.name }}
            </view>
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="u-column-item" v-for="(item, index) in districtsObj.areas" :key="index">
            <view class="u-line-1">
              {{ item.name }}
            </view>
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </van-action-sheet>
</template>

<script>
import { area } from '@/http/common'
export default {
  props: {
    safeAreaInsetBottom: {
      type: Boolean,
      default: false,
    },
    // 通过双向绑定控制组件的弹出与收起
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pickVal: [0, 0, 0],
      districtsObj: {
        provinces: [],
        cities: [],
        areas: [],
      },
      province: 0,
      city: 0,
      area: 0,
    }
  },
  watch: {
    // 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
    province(val) {
      this.loadCities(this.districtsObj.provinces[this.province].value)
    },
    city(val) {
      this.loadAreas(this.districtsObj.cities[this.city].value)
    },
  },
  mounted() {
    this.loadDistrict()
  },
  methods: {
    close() {
      this.$emit('closeAddress', false)
    },
    async loadDistrict() {
      this.loadProvinces()
    },
    async loadProvinces() {
      const { data } = await area()

      this.districtsObj.provinces = data
      this.loadCities(data[0].value)
    },
    async loadCities(AreaId) {
      const { data } = await area({
        province: AreaId,
      })
      this.districtsObj.cities = data
      this.loadAreas(AreaId, data[0].value)
    },
    async loadAreas(AreaId, cityId) {
      const { data } = await area({
        province: AreaId,
        city: cityId,
      })
      this.districtsObj.areas = data
    },
    bindChange(event) {
      this.pickVal = event.detail.value
      let i = 0
      console.log(event)
      this.province = this.pickVal[i++]
      this.city = this.pickVal[i++]
      this.area = this.pickVal[i++]
    },
    getResult(event = null) {
      let result = {
        province: this.districtsObj.provinces[this.province],
        city: this.districtsObj.cities[this.city],
        region: this.districtsObj.areas[this.area],
      }
      if (event) this.$emit(event, result)
      this.close()
    },
  },
  components: {},
}
</script>
<style lang="scss" scoped>
.u-datetime-picker {
  position: relative;
  z-index: 999;
}

.u-picker-view {
  height: 100%;
  box-sizing: border-box;
}

.u-picker-header {
  width: 100%;
  height: 112rpx;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 32rpx;
  background: #fff;
  position: relative;
}

.u-picker-header::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}
.u-picker-header .title {
  font-size: 34rpx;
  color: #2b303b;
}
.u-picker-body {
  width: 100%;
  height: 500rpx;
  overflow: hidden;
  background-color: #fff;
}

.u-column-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  padding: 0 8rpx;
}

.u-text {
  font-size: 24rpx;
  padding-left: 8rpx;
}

.u-btn-picker {
  padding: 16rpx;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: #3775f2;
}

.u-opacity {
  opacity: 0.5;
}

.u-btn-picker--primary {
}

.u-btn-picker--tips {
}
</style>
